<template>
  <div class="task-report-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>任务完成情况报表</span>
          <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </div>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="总任务数" :value="156" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="已完成" :value="98" suffix="个">
              <template #prefix>
                <el-icon style="color: #67C23A"><Select /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="按时完成率" :value="92" suffix="%" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="平均完成时间" :value="3.5" suffix="天" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>任务完成趋势</span>
            </template>
            <v-chart :option="trendChartOption" style="height: 350px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>任务优先级分布</span>
            </template>
            <v-chart :option="priorityChartOption" style="height: 350px" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <span>各项目任务完成对比</span>
            </template>
            <v-chart :option="projectTaskChartOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 任务列表 -->
      <el-card shadow="hover" style="margin-top: 20px">
        <template #header>
          <span>任务详细数据</span>
        </template>
        <el-table :data="taskData" border stripe>
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="title" label="任务名称" min-width="200" />
          <el-table-column prop="project" label="所属项目" width="180" />
          <el-table-column prop="assignee" label="负责人" width="100" />
          <el-table-column prop="priority" label="优先级" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getPriorityType(row.priority)">
                {{ getPriorityText(row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === 'completed' ? 'success' : 'primary'">
                {{ row.status === 'completed' ? '已完成' : '进行中' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="耗时" width="100" align="center">
            <template #default="{ row }">
              {{ row.duration }}天
            </template>
          </el-table-column>
          <el-table-column prop="completeDate" label="完成日期" width="120" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { Download, Select } from '@element-plus/icons-vue'

use([CanvasRenderer, LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const taskData = ref([
  { title: '需求调研', project: 'XX集团ERP实施', assignee: '张伟', priority: 'high', status: 'completed', duration: 5, completeDate: '2024-10-10' },
  { title: '系统配置', project: 'XX集团ERP实施', assignee: '李娜', priority: 'medium', status: 'inprogress', duration: 3, completeDate: '-' },
  { title: '数据迁移', project: 'YY公司财务系统', assignee: '王强', priority: 'high', status: 'completed', duration: 4, completeDate: '2024-10-15' }
])

const trendChartOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['完成任务', '新增任务'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['第1周', '第2周', '第3周', '第4周'] },
  yAxis: { type: 'value', name: '任务数' },
  series: [
    { name: '完成任务', type: 'line', data: [20, 25, 28, 25], smooth: true },
    { name: '新增任务', type: 'line', data: [15, 20, 18, 22], smooth: true }
  ]
})

const priorityChartOption = ref({
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '任务优先级',
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 45, name: '高优先级' },
      { value: 78, name: '中优先级' },
      { value: 33, name: '低优先级' }
    ]
  }]
})

const projectTaskChartOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['待办', '进行中', '已完成'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['项目A', '项目B', '项目C', '项目D'] },
  yAxis: { type: 'value', name: '任务数' },
  series: [
    { name: '待办', type: 'bar', stack: '总量', data: [5, 3, 4, 6] },
    { name: '进行中', type: 'bar', stack: '总量', data: [8, 10, 7, 9] },
    { name: '已完成', type: 'bar', stack: '总量', data: [20, 25, 18, 22] }
  ]
})

const getPriorityType = (priority) => {
  const map = { low: 'info', medium: 'warning', high: 'danger' }
  return map[priority] || ''
}

const getPriorityText = (priority) => {
  const map = { low: '低', medium: '中', high: '高' }
  return map[priority] || priority
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.task-report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}
</style>

